<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, email=no, address=no" />
    <title>Demo</title>
    <link rel="stylesheet" type="text/css" href="framework7.css">
</head>

<body>
    <div class="statusbar-overlay"></div>
    <div class="panel-overlay"></div>
    <div class="views">
        <div class="view view-main" data-page="home">
            <div class="pages">
                <div data-page="home" class="page navbar-fixed">
                    <div class="navbar">
                        <div class="navbar-inner">
                            <div class="left"></div>
                            <div class="center" style="left: 0px;">接口调用示例</div>
                            <div class="right"></div>
                        </div>
                    </div>
                    <div class="page-content">
                        <div class="content-block-title">功能</div>
                        <div class="content-block">
                            <p><a href="#" class="button" id="upload">点我选择图片</a></p>
                            <p><a href="#" class="button" id="token">获取请求token</a></p>
                            <p><a href="#" class="button" id="config">获取配置信息</a></p>
                            <p><a href="#" class="button" id="back">点我返回应用</a></p>
                        </div>
                        <h1>请查看页面源码,获取相关代码片段</h1>
                        <div class="content-block">
                            <p>native(简称NA)，对于文件相关的操作，现有的手机客户端还未提供相应能力，已经在开发中了！</p>
                            <p>现在的调试模式有点痛苦，很快会有更友好的开发和调试方式！</p>
                            <h1>开发方式</h1>
                            <ol>
                                <li>在手机上安装工作圈的（开发版）</li>
                                <li>在工作页签中，点击任意一个应用，弹出对话框，在对话框中填写demo的下载地址，比如：http://xxx.xxx.com/deom.zip</li>
                                <li>点击确定，启动应用</li>
                            </ol>
                            <h1>压缩包的规范</h1>
                            <ol>
                                <li>由于是采用html,css和js开发，所有代码的组织方式是没有任何约束的！</li>
                                <li>【重点】包的根目录下，必须包含index.html，这个是入口文件</li>
                            </ol>
                            <h1>发送ajax请求</h1>
                            <ol>
                                <li>在发送ajax请求之前，先通过getToken()方法获取到auth数据，然后在ajax请求的header中, 设置 Authorization，就可以通过用户认证了;</li>
                                <li>如果不想每次都获取，可以通过getConfig()方法获取到auth数据，然后发送请求时，设置header信息, 若请求失败，且是因为auth过期，可以调用getToken()方法后，再次发送请求
                                </li>
                                <li>options.headers = { 'Authorization': auth };
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="cordova.js"></script>
    <script src="framework7.js"></script>
    <script>
    var $ = Dom7;

    var noop = function() {};

    var selectImgs = function(success, error) {
        cordova.exec(success, error, 'Album', 'selectImgs', [{
            selectedCount: 0,
            maxCount: 20
        }]);
    };
    // 获取用户token
    var getToken = function() {
        cordova.exec(
            function(res) {
                var auth = JSON.parse(res).data.auth;
                alert(auth);
            },
            function(res) {
                alert(JSON.stringify(res));
            },
            'ReqHeader',
            'getReqHeader', []
        );
    };

    // 获取配置信息,该信息中包含auth信息,在请求接口时,将
    var getConfig = function() {
        cordova.exec(
            function(resp) {
                alert(JSON.parse(resp).data);
            },
            function(error) {
                alert(error);
            },
            'Config',
            'getConfig', []
        );
    };

    window.back = function() {
        cordova.exec(noop, noop, 'Destroy', 'destroy', []);
    };

    var onDeviceReady = function() {
        $('#upload').on('click', function() {
            selectImgs(function(resp) {
                alert(resp);
            }, function(error) {
                alert(error);
            });
        });
        $('#token').on('click', function() {
            getToken();
        });
        $('#config').on('click', function() {
            getConfig();
        });
        $('#back').on('click', function() {
            back();
        });
    };

    document.addEventListener('deviceready', onDeviceReady, false);
    </script>
</body>

</html>
